<template>
  <div class="square-block">
    <div
      class="square-block-dummy"
      :style="dummyStyle"
    ></div>
    <div
      class="square-block-box"
      :style="boxStyle"
    >
      <image
        :src="src"
        mode="aspectFill"
      ></image>
    </div>
    <div class="square-block-cover">
      
    </div>
  </div>
</template>

<script>
export default {
  props: {
    ratio: {
      type: Number,
      default: 1
    },
    src: {
      type: String,
      default: '',
      required: true
    },
    icon: {
      type: String,
      default: ''
    },
    radius: [Number, String]
  },
  data () {
    return {
      borderRadius: 0
    }
  },
  computed: {
    dummyStyle () {
      let ratio = 100
      if (this.ratio > 0) {
        ratio /= this.ratio
      }
      return `margin-top:${ratio}%`
    },
    boxStyle () {
      if (this.radius) {
        let radius = this.addUnit(this.radius)
        return `border-radius: ${radius}`
      }
      return ''
    }
  },
  methods: {
    addUnit (value) {
      console.log(value)
      if (value) {
        return /^\d+(\.\d+)?$/.test(value) ? value + 'px' : value
      }
      return undefined
    }
  }
}
</script>

<style lang="less">

.square-block {
  border: 1px solid transparent;
  position: relative;
  &-dummy {
    margin-top: 100%;
  }
  &-box {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -moz-box-align: center;
    -moz-box-pack: justify;
    align-items: center;
    align-content: space-around;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    flex-wrap: nowrap;

    image {
      width: 100%;
      height: 100%;
    }
  }
  &-cover {
    position: absolute;
    left: 50%;
    top: 30%;
    height: 20%;
    &::before {
      margin-top: 100%;
      content: "";
    }
  }
}
</style>
